import { Authenticator, Tabs } from '@aws-amplify/ui-react';
import { Example } from '@/components/Example';
import { InlineFilter } from '@/components/InlineFilter';

## Variation

The Authenticator has multiple variations to meet the needs of your application.

<Tabs.Container defaultValue="default">
  <Tabs.List>
    <Tabs.Item value="default">default</Tabs.Item>
    <Tabs.Item value="modal">modal</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="default">
    By default, the Authenticator will render as a centered card within the container:

    <InlineFilter filters={['angular']}>
      ```html{1} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/sign-in-with-username/sign-in-with-username.component.html

      ```
    </InlineFilter>
    <InlineFilter filters={['react']}>
      ```tsx{3} file=../../../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-username/index.page.tsx#L9-

      ```
    </InlineFilter>
    <InlineFilter filters={['vue']}>
      ```html
      <template>
        <authenticator>
          <template v-slot="{ user, signOut }">
            <h1>Hello {{ user.username }}!</h1>
            <button @click="signOut">Sign Out</button>
          </template>
        </authenticator>
      </template>
      ```
    </InlineFilter>

    <InlineFilter filters={['svelte']}>
    ```html
    <Authenticator>
      {#snippet children({ user, signOut })}
        <h1>Hello {user.username}!</h1>
        <button onclick={signOut}>Sign Out</button>
      {/snippet}
    </Authenticator>
    ```
    </InlineFilter>

    <Example>
      <Authenticator />
    </Example>

  </Tabs.Panel>

  <Tabs.Panel value="modal">
    The `modal` variation overlays the entire screen with the Authenticator:

    <InlineFilter filters={['angular']}>
      ```html{1} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/modal/modal.component.html

      ```
    </InlineFilter>
    <InlineFilter filters={['react']}>
      ```tsx{3} file=../../../../../../../examples/next/pages/ui/components/authenticator/modal/index.page.tsx#L9-

      ```
    </InlineFilter>
    <InlineFilter filters={['vue']}>
      ```html{2} file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/modal/index.vue#L10-

      ```
    </InlineFilter>

    <InlineFilter filters={['svelte']}>
    ```html{3} file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/modal/+page.svelte

    ```
    </InlineFilter>

    <Example>
      <Authenticator variation="modal" />
    </Example>

  </Tabs.Panel>
</Tabs.Container>
